<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
    <title>作者信息</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/my.css">
    <link rel="stylesheet" href="../css/demo.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/exif.js"></script>
	<script src="../js/hammer.js"></script>
	<script src="../js/iscroll-zoom.js"></script>
	<script src="../js/lrz.all.bundle.js"></script>
	<script src="../js/jquery.photoClip.js"></script>
	<script src="../js/public.js"></script>
	<script type="text/javascript">
		document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 100 + 'px';
	</script>
    <style>
        body{
            background: #f9f9f9;
            width: 100%;
    		/*overflow: hidden;*/
        }
        .upload_box {
            width: 100%;
            /* margin: 1em auto; */
        }
        .Publish_goods{
        	padding: 0 0.12rem;
        }
        .Publish_goods textarea{
            font-size: 14px;
            border: 0.01rem solid #5F3104;
        }
        .upload_drag_area {
            display: inline-block;
            width: 60%;
            padding: 4em 0;
            margin-left: .5em;
            border: 1px dashed #ddd;
            background: #fff url(drag.png) no-repeat 20px center;
            color: #999;
            text-align: center;
            vertical-align: middle;
        }
        .upload_drag_hover {
            border-color: #069;
            box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
            color: #333;
        }
        .upload_preview {
            background-color: #fff;
            overflow: hidden;
            _zoom: 1;
            float: left;
        }
        .upload_append_list {
            /* height: 300px; */
            margin-right: 8px;
            width: 60px;
            height: 60px;
            float: left;
            position: relative;
        }
        .upload_devare {
            margin-left: 2em;
            background: url('../img/删除@2x.png') no-repeat center;
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: contain;
        }
        .upload_submit_btn {
            display: none;
            height: 32px;
            font-size: 14px;
        }
        .upload_loading {
            height: 250px;
            background: url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;
        }
        .upload_progress {
            display: none;
            padding: 5px;
            border-radius: 10px;
            color: #fff;
            background-color: rgba(0, 0, 0, .6);
            position: absolute;
            left: 25px;
            top: 45px;
        }
        .upimg{
            width: 60px;
            height: 60px;
        }
        #body{
            margin-top: -6px;
            border-bottom: solid 1px #ddd;
        }
        #clipArea{
        	position: fixed;
        	left: 0;
        	top: 0;
        	width: 100%;
        	height: 100%;
        	display: none;
        }
        #clipBtn{
        	position: absolute;
        	right: 0;
        	bottom: 0;
        	width: 150px;
        	height: 40px;
        	font-size: 14px;
        	line-height: 40px;
        	text-align: center;
        	background: #5F3104;
        	border-radius: 9px;
        	color: #FFF;
        	z-index: 100;
        }
        .my_title{
        	font-size: 0.16rem;
        	font-weight: bold;
        	padding: 0.2rem 0;
        }
        .input_border{
        	height: 0.4rem;
        	border: 0.01rem solid #5F3104;
        	padding-left: 0.12rem;
        }
        .input_border input{
        	height: 0.38rem;
        	line-height: 0.38rem;
        	font-size: 0.16rem;
        	width: 100%;
        	border: none;
        	outline: none;
        }
        .save_btn{
        	width: 100%;
        	height: 0.36rem;
        	line-height: 0.36rem;
        	text-align: center;
        	color: #FFF;
        	background: #5F3104;
        	margin: 0.2rem auto 0;
        	border-radius: 0.05rem;
        }
        .updata_img{
        	width: 100%;
        	position: relative;
        }
        .updata_img img{
        	display: block;
        	width: 100%;
        }
        .updata_img input{
        	width: 100%;
        	height: 100%;
        	position: absolute;
        	left: 0;
        	top: 0;
        	opacity: 0;
        }
    </style>
</head>
<body>
	<div class="Publish_goods bc-gray">
		<p class="my_title">作者姓名</p>
		<div class="input_border">
			<input type="text" maxlength="10" placeholder="请输入作者姓名"/>
		</div>
		
	    <p class="my_title">作者相片</p>
	    <div id="body" class="light">
	        <div id="content" class="show">
	            <div class="demo">
	                <div class="upload_box">
	                    <div class="upload_main">
	                        <div id="preview" class="upload_preview"></div>
	                        <div class="upload_choose" style="float: left;position: relative;">
	                            <img src="../img/addcopy@2x.png" alt="" style='width:60px;height:60px;display: block;' id="add_img" >
	                            <input id="fileImage" type="file"  style="width: 60px;height: 60px;position: absolute;top: 0;opacity: 0;"/>
	                        </div>
	                    </div>
	                    <div class="upload_submit">
	                        <button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	    <p class="my_title">作者海报</p>
	    <!--<textarea name="" id="txt_intro" style="padding: 0.12rem;box-sizing: border-box;" cols="30" rows="10" placeholder="请输入对作者的介绍" v-model="datas"></textarea>-->
	   <div class="updata_img">
            <img src="../img/上传照片@2x.png" class="add_img11" id="store_img">
            <input type="file" class="files" onchange="updataimg(this)">
            <div class="remarks">海报大小请限制在1M以内</div>
        </div>
		<div class="save_btn" onclick="check_all()">保存</div>
	</div>
	<div id="clipArea">
		<div id="clipBtn">确认裁剪并上传</div>
	</div>
</body>
<script>
    var imgss = '';
    var placard = ''
    var ids = GetQueryString("id");
    var pids = GetQueryString("pid");
    sessionStorage.removeItem('keywords');
    var my_production = JSON.parse(sessionStorage.my_production);//获取上两个页面的信息
    console.log(my_production);
    var $par = $('#preview');
    var clipArea = new bjj.PhotoClip("#clipArea", {//图片上传裁剪插件！
		size: [400, 400],
		outputSize: [800, 800],
		file: "#fileImage",
		view: "#view",
		ok: "#clipBtn",
		loadStart: function() {
			////console.log("照片读取中");
		},
		loadComplete: function() {
			////console.log("照片读取完成");
			$('#clipArea').show();
		},
		clipFinish: function(base64) {
			////console.log(base64);
			var newsIndex = base64.indexOf(",");
            var news = base64.substr(parseInt(newsIndex + 1));
            $.ajax({ //上传头像
                type: "post",
                url: base_url+"ZITAOHUI/upload/image",
                data:{
                    imageData:news
                },
                beforeSend:function(){
                	$('#clipBtn').text('上传中……');
                },
                dataType: "json",
                success: function (data) {
                    if (data.code == 1) {
                        //console.log("上传成功");
                        $('#clipArea').hide();
                        $('#clipBtn').text('确认裁剪并上传');
                        var _url = data.extend.msg.fileUrl;
                        $par.append('<div class="img-div" style="float: left;position: relative;margin-right: 10px;"><img class= "upimg" imgurl="' + _url + '" src=' + base64 + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');
                    	if($('.img-div').length==1){//上传了三张以后，把添加图片的按钮删除
                    		$('.upload_choose').hide();
                    	}
                    } else{
                        alert("上传失败");
                    }
                },
                error: function (error) {

                }
            })
		}
	});

    function delImg (obj){//点击图片右上角执行的函数
        $(obj).parent().remove();
        $('.upload_choose').show();
    }
    
    function updataimg(fileObj){//上传海报的接口
		var file_img = fileObj.files['0'];
	    //创建读取文件的对象  
	    var reader = new FileReader();  
	    //创建文件读取相关的变量  
	    var imgFile;  
	    //为文件读取成功设置事件  
	    reader.onload=function(e) {  
		    //alert('文件读取完成');  
		    imgFile = e.target.result;  //这里就已经是base64的格式了
		    console.log(imgFile); 
		    var newsIndex = imgFile.indexOf(",");
			var news = imgFile.substr(parseInt(newsIndex + 1));
			console.log(news);
			$.ajax({
				type: "post",
				url: base_url + "ZITAOHUI/upload/image",
				data: {
					"imageData": news
				},
				dataType: "json",
				success: function(data) {
					if(data.code == 1) {
						var _url = data.extend.msg.fileUrl;
						$('.add_img11').attr('src',_url);
						placard = _url;
					} else {
						alert("上传失败，请刷新后重试");
					}
				},
				error: function(error) {

				}
			});
	    };
	    //console.log(file_img.size);
	    if(file_img.size>1024*1024){
	    	alert('图片大小大于1M，请压缩图片后重试');
	    }else{
	    	//正式的读取文件
	    	reader.readAsDataURL(file_img); 
	    }
	    
	}
    function check_all(){
    	var pro_author = $(".input_border input").val();
//  	var pro_author_jie = $('textarea').val();
    	var pro_author_img = $(".img-div").length == 1 ? true : false;
    	var pro_author_imgurl = $(".upimg").eq(0).attr("imgurl");
    	if(pro_author&&placard&&pro_author_img){
//  		"author_name"(作者名):"",
//			"author_photo_url"(照片):"",
//			"author_presentation"(描述):""
			my_production.author_name = pro_author;
			my_production.author_photo_url = pro_author_imgurl;
//			my_production.author_presentation = pro_author_jie;
			my_production.placard = placard;
    		truePost();
    	}else{
    		alert('请填写全部的信息');
    	}
    }
	function truePost() {
		var newurls = '';
		if(isNull(GetQueryString('ids'))) {//判断是新增作品还是修改作品
			newurls = "ZITAOHUI/createProduction"
		} else {
			newurls = "ZITAOHUI/updateProduction?auctionId=" + GetQueryString('ids') + "&produceId=" + GetQueryString('pids');
		}
		$.ajax({
			type: 'POST',
			url: base_url + newurls,
			data:JSON.stringify(my_production),
			contentType: "application/json;charset=UTF-8;",
			success: function(data) {
				if(data.code == 1) {
					alert("保存成功");
					window.location.replace("./my_Lot-management.html");
				} else {
					alert("保存失败");
				}
			},
			error: function(error) {
				alert("网络请求超时");
			}
		})
	}
    function clickXy(){
        window.location.href = "zthxy.html"
    }
</script>
</html>